<template>
    <div>
        <el-table ref="table" :data="dialogStatus.title == '编辑' ? finalTableData : props.data" table-layout="auto"
            size="small" border class="table" max-height="200" :row-key="(row) => row.id" scrollbar-always-on
            v-vTablescroll="dialogStatus.title == '编辑' ? loadMore : ''" v-loading="loading">
            <el-table-column label="对应站点名称" width="155">
                <template #default="scope">
                    <el-select v-model="scope.row.staid" clearable remote filterable placeholder="请选择对应站点">
                        <el-option v-for="item in siteList" :key="item.stationid" :label="item.stationname"
                            :value="item.stationid" />
                    </el-select>
                    <!-- <el-input v-model="scope.row.staid" clearable placeholder="请输入对应站点" /> -->
                </template>
            </el-table-column>
            <el-table-column label="左侧货位名称" width="155" prop="leftlocid">
                <template #default="scope">
                    <el-select v-model="scope.row.leftlocid" clearable remote filterable placeholder="请选择左侧货位">
                        <el-option v-for="item in stationSelect" :key="item.Id" :label="item.Code"
                            :value="item.Id ? item.Id : ''" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="右侧货位名称" width="155" prop="rightlocid">
                <template #default="scope">
                    <el-select v-model="scope.row.rightlocid" clearable remote filterable placeholder="请选择右侧货位">
                        <el-option v-for="item in stationSelect" :key="item.Id" :label="item.Code"
                            :value="item.Id ? item.Id : ''" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template #default="scope">
                    <el-button type="success" :icon="Plus" size="small" circle @click="addCrood(scope.$index)" />
                    <el-button type="danger" :icon="Close" size="small" circle @click="DeleteCrood(scope.$index)" />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch, onMounted, nextTick, defineEmits, computed } from 'vue'
import { message } from "@/utils/message";
import { Plus, Close } from '@element-plus/icons-vue'
import { dialogStoreHook } from "@/store/modules/dialog";
const dialogStatus = dialogStoreHook();
import { GetStorePlaceList, GetAllStorePlaceList } from '@/utils/api/BasicManagement/locations'
import { GetAllStation } from '@/utils/api/dispatch/station'

const props = defineProps({
    data: {
        // 定义一个属性的类型为 Array，其中数组元素可以是任意类型（any）
        type: Array<any>,
        // 指定该属性为必需的，即在使用该组件时必须提供这个属性
        required: true,
        // 为该属性提供一个默认值，默认值为一个包含一个空对象的数组
        default: [{}],
    },
    stationSelect: {
        type: Array<any>,
        required: true,
        default: [{}]
    },
    siteList: {
        type: Array<any>,
        required: true,
        default: [{}]
    },
})

const table = ref()
const loading = ref(false)

// 新增站点信息
function addCrood(i) {
    loading.value = true
    nextTick(() => {
        table.value.data.splice(i + 1, 0, {});
        let loadingTime = setTimeout(() => {
            loading.value = false;
            clearTimeout(loadingTime)
        }, 1000);
    });
}

// 删除站点信息
function DeleteCrood(i) {
    loading.value = true
    if (table.value.data.length === 1) {
        table.value.data.splice(i, 1, {})
        message(`最后一条数据不能删除！`, {
            type: "error"
        });
    } else {
        table.value.data.splice(i, 1)
        let loadingTime = setTimeout(() => {
            loading.value = false;
            clearTimeout(loadingTime)
        }, 1000);
    }
}

watch(() => table.value?.data, (val) => {
    transferTableData.value.splice(0, val.length, ...val)
    dialogStatus.getStationList(val.length >= transferTableData.value.length ? val : transferTableData.value)
}, { deep: true })

/**
* 下拉动态加载逻辑
*/
/*下拉分页后的数据*/
const finalTableData = ref()
/*数据中转变量*/
const transferTableData = ref()
/*  props.layerListData 是从外部传给table组件使用的原始数据，用transferTableData 中转一下 */
transferTableData.value = props.data

let tempTableLayerData = []
let pageNum = 0
function loadMore() {
    if (!loading.value) loading.value = true
    const layerList = transferTableData.value
    // 数据总量
    const total = layerList.length
    // 每页条数
    const pageSize = 10
    // 如果加载结束就返回
    if (pageNum * pageSize > total) {
        loading.value = false
        return message(`数据已全部加载完成`, {
            type: "success"
        });
    }
    // 计算每页的数据
    const OnePageData = layerList.slice(pageNum * pageSize, (pageNum + 1) * pageSize)
    // 每下拉一页之后merge到前面的数据中
    const mergeData = tempTableLayerData.concat(OnePageData)
    tempTableLayerData = mergeData
    //形成最后的数据给table组件使用
    finalTableData.value = tempTableLayerData
    pageNum++
    let loadingTime = setTimeout(() => {
        loading.value = false;
        clearTimeout(loadingTime)
    }, 1000);
}



onMounted(() => {
    console.log(props.siteList);
    // console.log(table.value.data);
    // table.value.data = paginate(table.value.data, 10, 1)
    loadMore()
})



</script>

<style lang="scss" scoped></style>